<template>
  <div class="w-1200px m-auto text-center">
    <p class="text-28px font-600 mb-30px mt-40px">输入兑换码</p>
    <el-input v-model="code_" style="width: 500px; height: 50px" placeholder="例: H7xWBrYt" />
    <div class="btn" @click="exchange_code">立即兑换</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { use_exchange_code } from "@/api";

const code_ = ref();
const $router = useRouter();

onMounted(() => {
  // document.body.scrollTop = document.documentElement.scrollTop = 600;
  window.scrollTo(0, 500); // 这里的600是你希望滚动到的高度
});

const exchange_code = async () => {
  if (!code_.value) return ElMessage.error("输入兑换码");
  const { data, code, message } = await use_exchange_code({
    code: code_.value,
  });
  if (code === 200) {
    ElMessage.success("兑换成功");
    code_.value = "";
    $router.push('/search/exchange_success')
  } else {
    ElMessage.error(message);
  }
};
</script>

<style scoped>
.btn {
  width: 300px;
  margin-top: 30px;
  margin-left: 50%;
  transform: translate(-50%);
  line-height: 50px;
  border-radius: 25px;
  color: #fff;
  background-color: #bb0615;
  font-size: 20px;
  font-weight: bolder;
  cursor: pointer;
}
</style>
